<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />
    <div class="flex mt24">
      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">选择指令</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="500" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '12px 140px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">入库资料</span>
        </div>
        <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="500" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">发料资料</span>
        </div>
        <Table :tableData="tableData3" :tableHeader="tableHeader3" :TableHeight="500" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }" class="lastCard">
        <div class="btns">
          <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
          <el-button type="primary" size="default" @click="">打印</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'BottomWarehouseInvent'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入底模',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '类型',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'date',
    dateLabel: '收发日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出收发料报表'
  },
  {
    type: 'input',
    inputLabel: '日期',
    inputDisabled: true,
    inputValue: '2023-06-21'
  },
  {
    type: 'button',
    checkboxLabel: '导出库存日报表'
  },
  {
    type: 'button',
    checkboxLabel: '导出底仓台账（号码）'
  }
])

const tableHeader = ref([
  {
    label: '指令',
    prop: 'instruction'
  },
  {
    label: '型体',
    prop: 'shape'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数量',
    prop: 'orderQuantity'
  },
  {
    label: '库存数量',
    prop: 'stockQuantity'
  }
])
const tableData = ref([
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  }
])

const tableHeader2 = ref([
  {
    label: '厂商',
    prop: 'manufacturer'
  },
  {
    label: '数量',
    prop: 'quantity'
  }
])
const tableData2 = ref([
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  }
])

const tableHeader3 = ref([
  {
    label: '部门',
    prop: 'department'
  },
  {
    label: '数量',
    prop: 'quantity'
  }
])
const tableData3 = ref([
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  }
])
</script>

<style lang="less" scoped>
.lastCard {
  :deep(.el-card__body:last-child) {
    display: flex;
    height: 100%;
    flex-direction: column-reverse;
    align-items: center;
  }

  .btns {
    display: flex;
    margin: 10px 20px 0px;

    .bg {
      background-color: #e7e7e7;
      border: 1px solid #e7e7e7;
      color: #000000;
    }
  }
}
</style>
